前情提要：

講述完工具人的起源

方函式：終於到了最後一個能力async模式。
我：到現在都遇不到JS...

先知道async跟generator使用方式非常相似，
generator：用yield控制流程
async：用await控制

兩者差別在於async回傳的是一個Promise物件而不是{value:any,done:Boolean}。

如果想基本認識generator的可參考我在D14寫關於生成器的文章

基本認識

async function建構子建立，基本架構為：

//宣告
async function adds(){
    ....;
};

//裝入變數
const x = async function()=>{}

當async被呼叫時，會回傳一個Promise物件：

1. 當回傳一個值，Promise的狀態為resolve，並回傳值。
2. 當拋出例外或值時，該Promise狀態則為reject並回傳值。

async回傳背後的道理

不知道你會不會好奇，當你呼叫async裡面看起來回傳1，實際上卻是Promise物件，背後是什麼道理。

當async回傳1

async function asyncFn(){
    return 1;
}
asyncFn();

是不是會得到相同的結果，原因是當你用async時，它會偷偷幫你轉譯，所以實際上它長得就像是：

function normal(){
    return Promise.resolve(1);
}
normal();

await

數量不限，可寫可不寫

1. 這個語法只能在async內使用，在async function以外用會syntax error，

function hi(){
    await console.log(x);
}
hi()

2. 非Promise處理非同步使用

async function add(){
    await setTimeout((x=1)=>console.log(x),20000);
    console.log("x")
}
add()

之所以可以這樣使用，是因為當你使用非Promise的非同步語法時，它會自動將你輸出預設為resolve，並回傳值。

加入awiat就能避免流程被setTimeout卡頓。

3. 放Promise都怎麼用呢？
   一般await後面會是new Promise

async function add(){
    await new Promise((resolve,reject)=>{
        resolve("accept");
        reject("deny")
    });
    await new Promise((resolve,reject)=>{
        resolve("accept1");
        reject("deny2")
    });
}
add()

async vs Promise 從可讀性比較

假設你現在有三件事情想依序被執行

Promise
若用Promise，就是透過then()去串連

function a() {
  return new Promise((resolve, reject) => resolve("hi a"));
}

function b() {
  return new Promise((resolve, reject) => resolve("hi b"));
}

function c() {
  return new Promise((resolve, reject) => resolve("hi c"));
}

a()
  .then(function (x) {
    console.log(x);
    return b();
  })
  .then(function (x) {
    console.log(x);
    return c();
  })
  .then((y) => console.log(y));

async

async function hi() {
  let res1 = await new Promise((resolve, reject) => resolve("hi a"));
  let res2 = await new Promise((resolve, reject) => resolve("hi b"));
  let res3 = await new Promise((resolve, reject) => resolve("hi c"));
  console.log(res1);
  console.log(res2);
  console.log(res3);
}
hi();

比較起來，是不是好讀許多呢？

感謝我的隊友幫忙
推推她的文章初學者跪著學JavaScript Day29 : async 和 await

-- to be continued --

一切都要結束了？

那今天就到這邊摟！
每天的休息，是為了後面的追求，明天見。

reference:

MDN
Async & Await